# output.sourceMap

- **Type:**

```ts
type SourceMap =
  | boolean
  | {
      js?: Rspack.Configuration['devtool'];
      css?: boolean;
    };
```

- **Default:**

```ts
const defaultSourceMap = {
  js: mode === 'development' ? 'cheap-module-source-map' : false,
  css: false,
};
```

Used to set whether to generate source map files, and which format of source map to generate.

:::tip What is a source map
Source map is an information file that saves the source code mapping relationship. It records each location of the compiled code and the corresponding pre-compilation location. With source map, you can directly view the source code when debugging the compiled code.
:::

## Default behavior

By default, the source map generation rules for Rsbuild are as follows:

- In development mode, source maps for JS files are generated for development debugging, while source maps for CSS files are not generated.
- In production mode, no source maps for JS and CSS files are generated to improve build performance.

## Boolean value

If `output.sourceMap` is `true`, the source map will be generated according to the [mode](/config/mode), equivalent to:

```js
export default {
  output: {
    sourceMap: {
      js: mode === 'development' ? 'cheap-module-source-map' : 'source-map',
      css: true,
    },
  },
};
```

If `output.sourceMap` is `false`, no source map will be generated, equivalent to:

```js
export default {
  output: {
    sourceMap: {
      js: false,
      css: false,
    },
  },
};
```

## JS source map

The source map for JS files is controlled by `sourceMap.js` and can be configured by passing in all the source map formats supported by Rspack's [devtool](https://rspack.rs/config/devtool) option. Setting it to `false` will disable the source map.

For example, if you need to generate high-quality source maps in all environments, you can set it as follows:

```js
export default {
  output: {
    sourceMap: {
      js: 'source-map',
    },
  },
};
```

You can also set different source map formats based on the environment.

```js
export default {
  output: {
    sourceMap: {
      js:
        process.env.NODE_ENV === 'production'
          ? // Use a high quality source map format for production
            'source-map'
          : // Use a more performant source map format for development
            'cheap-module-source-map',
    },
  },
};
```

## CSS source map

The source map for CSS files is controlled by `sourceMap.css`. Setting it to `true` will enable the source map, while setting it to `false` will disable it.

For example, if you need to generate a source map for CSS files, you can set it as follows:

```js
export default {
  output: {
    sourceMap: {
      css: true,
    },
  },
};
```

In production builds, it is not recommended to enable both [output.injectStyles](/config/output/inject-styles) and `output.sourceMap.css`, as `output.injectStyles` will inject the source map into the JS bundles, which will increase the file size and slow down the page loading speed.

You can only enable the CSS file source map in the development mode:

```js
export default {
  output: {
    injectStyles: true,
    sourceMap: {
      css: process.env.NODE_ENV === 'development',
    },
  },
};
```
